<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>MQTTX</title>
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .content-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      @keyframes loading-animate {
        0% {
          opacity: 1;
          transform: translateZ(0) scale(1.5, 1.5);
        }
        100% {
          opacity: 0;
          transform: translateZ(0) scale(1, 1);
        }
      }
      .loading-inner-box div > div {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #34c388;
        -webkit-animation: loading-animate 1s linear infinite;
        animation: loading-animate 1s linear infinite;
      }
      .loading-inner-box div:nth-child(1) > div {
        left: 234px;
        top: 144px;
        animation-delay: -0.9s;
      }
      .loading-inner-box > div:nth-child(1) {
        transform: rotate(0deg);
        transform-origin: 240px 150px;
      }
      .loading-inner-box div:nth-child(2) > div {
        left: 217px;
        top: 197px;
        animation-delay: -0.8s;
      }
      .loading-inner-box > div:nth-child(2) {
        transform: rotate(36deg);
        transform-origin: 223px 203px;
      }
      .loading-inner-box div:nth-child(3) > div {
        left: 172px;
        top: 230px;
        animation-delay: -0.7s;
      }
      .loading-inner-box > div:nth-child(3) {
        transform: rotate(72deg);
        transform-origin: 178px 236px;
      }
      .loading-inner-box div:nth-child(4) > div {
        left: 116px;
        top: 230px;
        animation-delay: -0.6s;
      }
      .loading-inner-box > div:nth-child(4) {
        transform: rotate(108deg);
        transform-origin: 122px 236px;
      }
      .loading-inner-box div:nth-child(5) > div {
        left: 71px;
        top: 197px;
        animation-delay: -0.5s;
      }
      .loading-inner-box > div:nth-child(5) {
        transform: rotate(144deg);
        transform-origin: 77px 203px;
      }
      .loading-inner-box div:nth-child(6) > div {
        left: 54px;
        top: 144px;
        animation-delay: -0.4s;
      }
      .loading-inner-box > div:nth-child(6) {
        transform: rotate(180deg);
        transform-origin: 60px 150px;
      }
      .loading-inner-box div:nth-child(7) > div {
        left: 71px;
        top: 91px;
        animation-delay: -0.3s;
      }
      .loading-inner-box > div:nth-child(7) {
        transform: rotate(216deg);
        transform-origin: 77px 97px;
      }
      .loading-inner-box div:nth-child(8) > div {
        left: 116px;
        top: 58px;
        animation-delay: -0.2s;
      }
      .loading-inner-box > div:nth-child(8) {
        transform: rotate(252deg);
        transform-origin: 122px 64px;
      }
      .loading-inner-box div:nth-child(9) > div {
        left: 172px;
        top: 58px;
        animation-delay: -0.1s;
      }
      .loading-inner-box > div:nth-child(9) {
        transform: rotate(288deg);
        transform-origin: 178px 64px;
      }
      .loading-inner-box div:nth-child(10) > div {
        left: 217px;
        top: 91px;
        animation-delay: 0s;
      }
      .loading-inner-box > div:nth-child(10) {
        transform: rotate(324deg);
        transform-origin: 223px 97px;
      }
      .loading-wrapper {
        width: 300px;
        height: 300px;
        display: inline-block;
        overflow: hidden;
        background: url('./app.png') no-repeat;
        background-size: 32% 32%;
        background-position: 50%;
      }
      .loading-inner-box {
        width: 100%;
        height: 100%;
        position: relative;
        transform: translateZ(0) scale(1);
        backface-visibility: hidden;
        transform-origin: 0 0;
      }
      .loading-inner-box div {
        box-sizing: content-box;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but mqttx doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="content-box">
        <div class="loading-wrapper">
          <div class="loading-inner-box">
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
            <div><div></div></div>
          </div>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
